<template>
  <transition name="slide-right">
    <div class="edit-dialog" v-if="visible">
      <h3 style="font-weight: bold; margin-bottom: 20px">编辑新闻</h3>
      <div class="dialog-body">
        <div class="form-layout">
          <div class="left-column">
            <div class="form-item">
              <label>新闻标题</label>
              <textarea v-model="form.newsTitle" placeholder="请输入新闻标题"></textarea>
            </div>
            <div class="form-item">
              <label>新闻标签</label>
              <select v-model="form.classReal">
                <option
                  v-for="item in classList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                >
              </option>
              </select>
            </div>
            <div class="form-item">
              <label>新闻来源</label>
              <input
                v-model="form.newsSource"
                placeholder="请输入新闻来源"
                disabled
                style="background-color: #f6f5f5"
              />
            </div>
            <div class="form-item">
              <label>新闻网址</label>
              <input
                v-model="form.sourceUrl"
                placeholder="请输入新闻网址"
                disabled
                style="background-color: #f6f5f5"
              />
            </div>
            <div class="form-item">
              <label>新闻摘要</label>
              <textarea v-model="form.abstractReal" rows="4"></textarea>
            </div>
          </div>

          <div class="right-column">
            <div class="form-item full-height">
              <label>正文内容</label>
              <textarea v-html="form.markContent" class="content-div"></textarea>
            </div>
          </div>
        </div>
      </div>
      <div class="dialog-footer">
        <button @click="handleCancel">取消</button>
        <button @click="handleConfirm">确定</button>
      </div>
    </div>
  </transition>
</template>

<script>
import { updateNewsItem } from '../api/news'

export default {
  name: 'NewsEditDialog',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    initialForm: {
      type: Object,
      default: () => ({
        newsTitle: '',
        classReal: null,
        newsSource: '',
        sourceUrl: '',
        abstractReal: '',
        markContent: '',
      }),
    },
  },
  data() {
    return {
      form: {},
      classList: [
        { value: 1, label: '宏观形势', color: '#409EFF' },
        { value: 2, label: '行业动态', color: '#67C23A' },
        { value: 3, label: '产业链动态', color: '#E6A23C' },
        { value: 4, label: '国际能源观察', color: '#F56C6C' },
        { value: 5, label: '其他', color: '#B37FEB' },
      ],
    }
  },
  watch: {
    initialForm: {
      handler(val) {
        this.form = { ...val } // 初始化表单数据

        // 确保classReal与classList中的label匹配
        if (this.form.classReal) {
          const matchedItem = this.classList.find(item => 
            item.label === this.form.classReal || item.value == this.form.classReal
          );
          if (matchedItem) {
            this.form.classReal = matchedItem.label;
          }
        }
      },
      immediate: true,
    },
  },
  methods: {
    handleCancel() {
      this.$emit('update:visible', false) // 关闭弹窗
    },
    async handleConfirm() {
      try {
        // 确保分类信息正确处理
        const classItem = this.classList.find(item => item.label === this.form.classReal);
        const updateData = {
          ...this.form,
          // 如果找到了对应的分类项，则使用其value值，否则使用原始值
          classReal: classItem ? classItem.value : this.form.classReal,
          // 同时保留标签名称，以便显示
          classLabel: this.form.classReal
        };

        // 调用API更新数据
        const response = await updateNewsItem(updateData)

        // 触发编辑确认事件，传递更新后的数据（包含颜色信息）
        this.$emit('confirm-edit', {
          ...updateData,
          // 添加颜色信息
          classColor: classItem ? classItem.color : '#909399'
        })

        // 关闭弹窗
        this.$emit('update:visible', false)

        // 显示成功提示
        this.$message.success('新闻更新成功')

        // 通知父组件刷新数据
        this.$emit('refresh-data')
      } catch (error) {
        this.$message.error('更新新闻失败，请重试')
      }
    },
  },
}
</script>

<style scoped>
.edit-dialog {
  position: fixed;
  top: 0;
  right: 0;
  width: 65vw;
  height: 100vh;
  background: #fff;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  box-sizing: border-box;
  z-index: 999;
  display: flex;
  flex-direction: column;
}
.form-layout {
  display: flex;
  height: 100%;
  flex-grow: 1;
}

.left-column {
  flex: 0 0 50%;
  padding-right: 15px;
  overflow-y: auto;
}

.right-column {
  flex: 0 0 50%;
  padding-left: 15px;
  border-left: 1px solid #eee;
  display: flex;
  flex-direction: column;
}

.form-item {
  margin-bottom: 16px;
}

.full-height {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.content-textarea,
.content-div {
  flex-grow: 1;
  min-height: 300px;
  resize: none;
}

.content-div {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px;
  overflow-y: auto;
  white-space: pre-wrap;
}

.content-div:focus {
  outline: none;
}

.form-item label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}
.form-item input,
.form-item select,
.form-item textarea {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.dialog-footer {
  margin-top: 24px;
  text-align: right;
}
.dialog-footer button {
  padding: 8px 16px;
  margin-left: 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.dialog-footer button:first-child {
  background: #f0f0f0;
}
.dialog-footer button:last-child {
  background: #409eff;
  color: #fff;
}
/* 右侧滑入动画 */
.slide-right-enter-active,
.slide-right-leave-active {
  transition: transform 0.3s ease;
}
.slide-right-enter-from {
  transform: translateX(100%);
}
.slide-right-leave-to {
  transform: translateX(100%);
}
</style>
